<template>
    <div class="instrConf bgf radius8">
        <el-row class="c3 fs16" style="margin-bottom: 20px;">
            <el-col :span="12">设备列表</el-col>
            <el-col :span="12">
                <el-row justify="end">
                    <el-button :icon="Plus" type="primary">新增</el-button>
                    <el-button :icon="Delete" type="danger">删除</el-button>
                </el-row>
            </el-col>
        </el-row>
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;height: 90%;">
            <el-table-column type="selection" width="55" />
            <el-table-column property="id" label="序号" width="100">
                <template #default="{ $index }">
                    {{ $index + 1 }}
                </template>
            </el-table-column>
            <el-table-column property="deviceName" label="设备名称" />
            <el-table-column property="topic" label="设别topic" />
            <el-table-column property="updateTime" label="最后一次消息时间" />
            <el-table-column property="id" label="IP" />
            <el-table-column property="is_alarm" label="报警">
                <template #default="{ row }">
                    <el-switch v-model="row.is_alarm" active-value="0" inactive-value="1" />
                </template>
            </el-table-column>
            <el-table-column label="设备状态">
                <template #default="scope">
                    <div class="circles" :class="{ 'enable': scope.row.onlineStatus == '0' }">{{ scope.row.onlineStatus
                            == '0' ?
                            '启用中' : '停用中'
                    }}</div>
                </template>
            </el-table-column>
            <el-table-column property="operation" label="操作">
                <template #default="scope">
                    <el-link @click="disabled(scope.row)" style="padding: 0 8px;" type="primary" :underline="false">禁用
                    </el-link>
                    <el-link style="padding: 0 8px;border-left: 1px solid #e4e7ed;border-right: 1px solid #e4e7ed;"
                        type="primary" :underline="false">编辑</el-link>
                    <el-link style="padding: 0 8px;" type="danger" :underline="false">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin-top: 10px;" justify="end" align="middle">
            <el-pagination :total="total" :page-sizes="[8, 10, 15, 20]" layout="total,prev, pager, next, sizes"
                @next-click="currentChange" @prev-click="currentChange" @size-change="sizeChange"
                @current-change="currentChange"></el-pagination>
        </el-row>

        <!-- 新增按钮弹窗 -->
        <el-dialog v-model="dialogFormVisible" title="新增设备">
            <el-form :model="form">
                <el-form-item label="设备名称:" :label-width="formLabelWidth">
                    <el-input v-model="form.deviceName" placeholder="请输入" autocomplete="off" style="width: 50%;" />
                </el-form-item>
                <el-form-item label="所属组织:" :label-width="formLabelWidth">
                    <div class="example-block" style="width: 100%;">
                        <el-cascader v-model="form.organizaName" size="default" :options="options" :props="props"
                            collapse-tags clearable style="width: 50%;" />
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addDevice">确认</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

 <script setup>
import { Plus, Delete } from '@element-plus/icons-vue';
import { ref, onBeforeMount, reactive } from 'vue'
import { getDeviceAll } from "@/api";
import { ElTable } from 'element-plus'

const currentPage1 = ref(1);
const pageSize1 = ref(10);
const tableData = ref([])
const dialogFormVisible = ref(false);
const formLabelWidth = '140px';
const pageSize = [8, 10, 15, 20];
// 当前每页数量
const size = ref(10);
// 当前页
const current = ref(1);
// 总条数
const total = ref(0);
const props = { multiple: true }
const options = [
    {
        value: 1,
        label: 'Asia',
        children: [
            {
                value: 2,
                label: 'China',
                children: [
                    { value: 3, label: 'Beijing' },
                    { value: 4, label: 'Shanghai' },
                    { value: 5, label: 'Hangzhou' },
                ],
            },
            {
                value: 6,
                label: 'Japan',
                children: [
                    { value: 7, label: 'Tokyo' },
                    { value: 8, label: 'Osaka' },
                    { value: 9, label: 'Kyoto' },
                ],
            },
            {
                value: 10,
                label: 'Korea',
                children: [
                    { value: 11, label: 'Seoul' },
                    { value: 12, label: 'Busan' },
                    { value: 13, label: 'Taegu' },
                ],
            },
        ],
    },
    {
        value: 14,
        label: 'Europe',
        children: [
            {
                value: 15,
                label: 'France',
                children: [
                    { value: 16, label: 'Paris' },
                    { value: 17, label: 'Marseille' },
                    { value: 18, label: 'Lyon' },
                ],
            },
            {
                value: 19,
                label: 'UK',
                children: [
                    { value: 20, label: 'London' },
                    { value: 21, label: 'Birmingham' },
                    { value: 22, label: 'Manchester' },
                ],
            },
        ],
    },
    {
        value: 23,
        label: 'North America',
        children: [
            {
                value: 24,
                label: 'US',
                children: [
                    { value: 25, label: 'New York' },
                    { value: 26, label: 'Los Angeles' },
                    { value: 27, label: 'Washington' },
                ],
            },
            {
                value: 28,
                label: 'Canada',
                children: [
                    { value: 29, label: 'Toronto' },
                    { value: 30, label: 'Montreal' },
                    { value: 31, label: 'Ottawa' },
                ],
            },
        ],
    },
]
//新增设备或编辑
const form = reactive({
    deviceName: '',
    organizaName: '',
})
//选择具体页数(包括左右页数变换)
const currentChange = (page) => {
    current.value = page;
    getDevice();
}
//选择每页条数数量
const sizeChange = (page) => {
    size.value = page;
    getDevice();
}

onBeforeMount(() => {
    getDevice();
})
const getDevice = async () => {
    let pdata = {
        current: current.value,
        size: size.value,
    }
    let data = await getDeviceAll(pdata);
    tableData.value = data.records;
    total.value = data.total;
}
//新增设备或编辑(确定按钮)
const addDevice = async () => {
    dialogFormVisible.value = false;
    console.log('form', form.deviceName, form.organizaName[0])
};

const disabled = (row) => {
    console.log('row', row)
}


</script>

<style lang="scss" scoped>
.instrConf {
    margin: 0 10px;
    max-height: 92vh;
    padding: 16px 25px;
    box-sizing: border-box;

    .circles {
        width: 100px;
        position: relative;
        padding-left: 12px;
        color: #25A749;
        margin: auto;

        &:before {
            content: '';
            width: 8px;
            height: 8px;
            display: block;
            border-radius: 50%;
            left: 20%;
            top: 8px;
            margin: auto;
            position: absolute;
            background-color: #25A749;
        }
    }

    .enable {
        color: #FF4D4F;

        &:before {
            content: '';
            background-color: #FF4D4F;
        }
    }
}
</style>
<style lang="scss" scoped>
:deep(thead .cell) {
    border-right: 1px solid #e4e7ed;
}

:deep thead {
    th:last-child {
        .cell {
            border-right: none;
        }
    }
}

:deep(.el-table .el-table__cell) {
    text-align: center;
    --el-table-header-bg-color: #f6f6f6;
}
</style>
